<template>


	<view class="manage-search-undertaking">
		<titleName :name="name" :backShow="true"></titleName>
		<view class="container">
			<view class="top-img">
				<image :src="resourceUrl+'chengnuoshu.png'" mode=""></image>
			</view>
			<view class="sel-val">
				<view class="line">
					<view class="name"><text class="star">*</text>1.企业名称</view>
					<view class="val"> {{params.enterprisename}}</view>
				</view>
				<view class="line">
					<view class="name"><text class="star">*</text>2.企业地址</view>
					<view class="val">
						<input type="text" placeholder="请输入企业地址" disabled placeholder-class="ph-class"
							v-model="params.enterpriseaddress" />
					</view>
				</view>
				<view class="line">
					<view class="name"><text class="star">*</text>3.承诺书</view>
					<image :src="resourceUrl+'orange-chengnuoshu.png'" class="chengnuoshu"></image>
				</view>
				<view class="principal">
					<view class="name"><text
							class="star">*</text>4.{{params.userno==1?'法人':params.userno==2?'负责人':''}}（签名）</view>
					<view class="val">
						<text>电话</text>
						<view class="phone height">
							<input type="text" placeholder="请输入电话" v-model="params.personmobile" />
						</view>
					</view>
					<view class="signature">

						<!-- <image @click="searchImage" v-if="promiseattachurl1 || promiseattachurl2"
							:src="userno==1?promiseattachurl1:promiseattachurl2" mode=""></image> -->
						<view class="canvas-wrap">
							<image :src="params.promiseattachurl" @click="lookImage(params.promiseattachurl)" mode=""
								class="signature-canvas">
							</image>
							<!-- 画布区域 -->
							<!-- 	<canvas canvas-id="signatureCanvas" class="signature-canvas" disable-scroll="true"
									@touchstart="handleTouchStart" @touchmove="handleTouchMove"
									@touchend="handleTouchEnd"></canvas> -->

							<!-- 操作按钮 -->
							<!-- <view class="button-group" @click="jumpSignature" v-if="userno!= 1 || userno !=2">
								<image :src="resourceUrl+'zhenggaizhixingshenpi.png'" mode=""></image>
								<text>点击开始手写签名</text>
							</view> -->


						</view>
					</view>
				</view>
				<view class="line date">
					<view class="name"><text class="star">*</text>5.签名日期</view>
					<view class="val">
						{{params.promisetime}}
						<!-- <uni-datetime-picker disabled v-model="params.promisedate" @change="dateChange" /> -->
					</view>
				</view>
				<!-- <view class="btn-wrap" @click="submit" v-if="!promiseattachurl1 && !promiseattachurl2">
					<button class="btn">立即提交</button>
				</view> -->
			</view>
		</view>

	</view>


</template>

<script setup>
	import titleName from '../../components/titleName.vue'
	import http from '../../request/index.js'
	import dayjs from 'dayjs'
	import uploadFile from '../../request/uploadFile.js'
	import {
		resourceUrl
	} from '../../request/config'
	import {
		onLoad,
		onShow,
		onReady
	} from '@dcloudio/uni-app'
	import {
		getCurrentInstance,
		ref
	} from 'vue'
	let usertype = ref('')
	let userno = ref('')
	let params = ref({
		attachurl: ''
	})
	let ctx = ref('')
	let points = ref([])
	let canvasWidth = ref(0)
	let signatureimg = ref('')
	let ids = ref('')
	let canvasHeight = ref(0)
	let tempFilePath = ref('')
	let signature = ref(false)
	let promiseattachurl1 = ref('')
	let promiseattachurl2 = ref('')
	let name = "承诺书"
	let searchImage = () => {
		let img = userno.value == 1 ? promiseattachurl1.value : promiseattachurl2.value

		uni.previewImage({
			urls: [img],
			current: 0
		})
	}
	let changeSignature = (e) => {

		signature.value = false
	}
	let lookImage = (url) => {
		

		uni.previewImage({
			urls: [url],
			current: 0
		})
	}
	let jumpSignature = () => {

		uni.redirectTo({
			url: `/pages/signature/index?id=${params.value.id}`
		})
	}

	let handleTouchStart = (e) => {
		const startX = e.touches[0].x;
		const startY = e.touches[0].y;
		points.value.push({
			x: startX,
			y: startY
		});
		ctx.value.beginPath();
		ctx.value.moveTo(startX, startY);
	}

	let handleTouchEnd = () => {}
	let submit = () => {
		console.log(params.value, 'params.value');
		if (!params.value.attachurl) {
			uni.showToast({
				title: "请手写签名",
				icon: 'none',
				duration: 2000
			})
			return
		}

		http({
			url: "/greenNotice/sayPromise",
			data: {
				id: params.value.id,
				attachurl: params.value.attachurl
			}
		}).then((res) => {
			if (res.code == 0) {
				uni.showToast({
					title: "提交成功",
					icon: "none",
					duration: 1500
				})
				setTimeout(() => {
					uni.redirectTo({
						url: `/homePageOther/enterprisewarningcontroldetail/index?id=${params.value.id}`
					})

				}, 1500)
			}
		})
	}



	let dateChange = (e) => {
		console.log(e, 'e');

	}
	let range = ref([{
			value: 0,
			text: "篮球"
		},
		{
			value: 1,
			text: "足球"
		},
		{
			value: 2,
			text: "游泳"
		},
	])

	let change = (e) => {
		console.log(e, 'e');
	}
	onLoad((e) => {
		usertype.value = uni.getStorageSync('usertype')
		params.value = JSON.parse(e.msg)

	})

	onShow(() => {
		// params.value.promisedate = new Date()
		console.log(params.value, 'params.value');
		// params.value.attachurl = uni.getStorageSync('signatureimg')


	})
</script>

<style lang="scss" scoped>
	.manage-search-undertaking {
		width: 100vw;
		height: 100vh;
		overflow: hidden;

		:deep(.uni-date) {
			width: 100%;
			height: 94rpx;
			line-height: 94upx;
			border: none !important;
		}

		:deep(.uni-date-x) {

			background-color: #F5F6F8;
		}

		:deep(.uni-date-x--border) {
			border: none !important;
		}

		:deep(.ph-class) {

			font-family: Source Han Sans CN;
			font-weight: 400;
			font-size: 29rpx;
			color: #999999;

		}

		:deep(.uni-select) {
			height: 94rpx;
			line-height: 94upx;
			border: none !important;
			padding-left: 0upx !important;
		}

		.container {
			height: calc(100vh - 160upx);
			padding-bottom: 170upx;
			overflow: scroll;

			.top-img {
				padding: 48upx 145upx 20upx 115upx;

				image {
					width: 100%;
					height: 95upx;
				}
			}

			.sel-val {
				padding: 0 56upx 0 50upx;

				.principal {
					margin-bottom: 45upx;
					overflow: hidden;

					.signature {
						width: 100%;
						height: 403rpx;
						background: #F5F6F8;
						border-radius: 7rpx;
						padding: 42upx 40upx 42upx 40upx;

						image {
							width: 100%;
							height: 100%;
						}

						.canvas-wrap {
							width: 100%;




							.signature-canvas {
								width: 100%;
								height: calc(403upx - 82upx);
								// border: 1px solid #ccc;
								background-color: #fff;
							}

							.button-group {
								margin-top: 20upx;
								display: flex;
								justify-content: center;
								width: 100%;

								image {
									width: 31rpx;
									height: 33rpx;
									margin-right: 20upx;
								}

								text {

									height: 29rpx;
									font-family: Source Han Sans CN;
									font-weight: 400;
									font-size: 31rpx;
									color: #0874FA;

								}
							}

							button {
								flex: 1;
								margin: 0 20upx;
							}


						}
					}

					.name {
						display: flex;
						align-items: center;
						margin-bottom: 30upx;

						.star {
							color: #FF0000;
						}
					}

					.val {
						display: flex;
						align-items: center;
						height: 94rpx;
						border-radius: 7rpx;
						margin-bottom: 40upx;

						text {
							width: 98upx;
							text-align: center;
							font-family: Source Han Sans CN;
							font-weight: 500;
							font-size: 34rpx;
							color: #000000;

						}

						.phone.height {
							height: 73rpx;
						}

						.phone {
							width: 100%;
							background: #F5F6F8 !important;
							margin-left: 14upx;

							input {
								height: 73rpx;
								line-height: 73upx;
								padding-left: 40upx;
							}
						}
					}
				}

				.btn-wrap {
					margin-top: 90upx;

					.btn {
						width: 100%;
						height: 87rpx;
						background: #0874FA;
						border-radius: 43rpx;
						line-height: 87upx;
						font-family: PingFang SC;
						font-weight: 500;
						font-size: 31rpx;
						color: #FFFFFF;

					}
				}

				.line {
					margin-bottom: 45upx;

					.chengnuoshu {
						height: 578upx;
						width: 100%;


					}

					.name {
						display: flex;
						align-items: center;
						margin-bottom: 30upx;

						.star {
							color: #FF0000;
						}


					}

					.val {

						width: 100%;
						height: 94rpx;
						background: #F5F6F8 !important;
						border-radius: 7rpx;
						padding-left: 40upx;
						line-height: 94upx;

						input {
							width: 100%;
							height: 94upx;
							line-height: 94upx;
						}
					}
				}

				.line.date {
					.val {
						padding-left: 20upx;
					}
				}
			}
		}


	}
</style>